<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../dist//vue.js"></script>
    
    <!-- 我们可以给模版中的属性增加一个收集器-dep 页面渲染的时候 我们将渲染逻辑封装到watcher中 vm._update(vm._render()); 让dep记住这个watcher即可 稍候属性变化了可以找到对应的dep中存放的watcher进行重新渲染 -->
    <div id="app" style="background-color: black;color: red;"><a href="#">{{name}}</a><b>123 <span>456{{age}}</span></b></div>

    <script>
        //Vue是MVVM框架 (基于mvc升级的 弱化controller层) vue没有完全遵循mvvm，因为传统的mvvm框架 不能手动操作数据，（ref可以操作组件数据）
        //vue的核心 响应式数据原理
        //React 是一个V框架 只做视图层 只是将数据转换为视图 并没有绑定的操作，更新数据也是手动调用 setState(实现组件化)

        //响应式数据原理 Vue2中采用的是defineProperty(我们的响应式原理的目的就是监控数据的变化，数据变化了更新视图，只要用户给数据复制了，触发视图更新)
        const vm = new Vue({
            el: "#app",
            data: {
                name: 'zf',
                age: 12,
                address: '123',
                arr:[{a:2}]
            }
        })
        vm._data.arr.push({a:1})
        // console.log(vm.arr);
        // vm.$options //可以通过实例的$options来获取创造实例上传递的参数

        // setTimeout(()=>{//全部更新
        //     vm.name='jw'; //数据变化后希望可以自动调用
        //     vm._update(vm._render());
        // },1000)

        //1.将数据先处理成响应式 initState (针对对象来说主要是增加defineProperty 针对数组就是重写方法push、splice、shift...)
        //2.模版编译：将模版先转换成ast语法树(正则)，将ast语法树生成render方法
        //3.调用render函数 会进行取值操作，产生对应的虚拟DOM render(){_c('div',null,_v(name))} 触发get方法
        //4.将虚拟dom渲染成真实dom


        setTimeout(()=>{
            vm.name='12'; 
            vm.name = '123';
            vm.name = '1234';
        },1000)

        vm.name = 'jw';//不会立即重新渲染页面
        //nextTick不是创建了一个异步任务，而是将这个任务维护到了队列中而已
        vm.$nextTick(()=>{
            console.log(app.innerHtml);
        })
        // console.log(app.innerHtml);//同步获取
        // setTimeout(()=>{
        //     console.log(app.innerHtml)
        // })//这样能拿到
        // Promise.resolve().then(()=>{
        //     console.log(app.innerHtml)
        // })
        //这时候要区分微任务和宏任务 promise优先级要比setTimeout高
    </script>

</body>
</html>